<!--
* @author wn
* @date 2023/07/26 10:21:59
* @description:首页
!-->
<template>
	<!-- 自定义导航栏 -->
	<CustomNavBar />
	<!-- 滚动容器 -->
	<scroll-view
		enable-back-to-top
		refresher-enabled
		@refresherrefresh="onRefresherrefresh"
		:refresher-triggered="isTriggered"
		@scrolltolower="getMore"
		scroll-y
	>
		<HomeSkeleton v-if="isLoading" />
		<template v-else>
			<!-- 自定义轮播图 -->
			<XtxSwiper :list="bannerList" />
			<!-- 分类面板 -->
			<CategoryPanel :list="categoryList" />
			<!-- 热门推荐 -->
			<HotPanel :list="hotList" />
			<!-- 猜你喜欢 -->
			<XtxGuess ref="guessRef" />
		</template>
	</scroll-view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import CustomNavBar from './components/CustomNavBar.vue'
import { getHomeBannerApi, getHomeCategoryApi, getHomeHotApi } from '@/api/home'
import { onLoad } from '@dcloudio/uni-app'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import { useGuess } from '@/hook/useGuess'
import HomeSkeleton from './components/HomeSkeleton.vue'

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
	const list = await getHomeBannerApi()
	bannerList.value = list
}

// 获取前台分类数据
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
	const list = await getHomeCategoryApi()
	categoryList.value = list
}

// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const getHotList = async () => {
	const list = await getHomeHotApi()
	hotList.value = list
}

// 是否加载中标记 -- 用于骨架屏
const isLoading = ref(true)

// 页面加载 -- Api调用
onLoad(async () => {
	isLoading.value = true
	// 并行执行
	await Promise.all([getBannerList(), getCategoryList(), getHotList()])
	isLoading.value = false
})

// 猜你喜欢组合式函数调用
const { guessRef, refresh, getMore } = useGuess()

// 当前下拉刷新状态
const isTriggered = ref(false)

// 下拉刷新
const onRefresherrefresh = async () => {
	// 开始动画
	isTriggered.value = true

	// isLoading

	// 下拉刷新 重置所有数据
	refresh()
	await Promise.all([getBannerList(), getCategoryList(), getHotList()])

	// 关闭动画
	isTriggered.value = false
}
</script>
